<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin: 0;padding: 0}
    .wrap{
        width: 300px;
        height: 300px;
        border: 1px solid;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }
    .inner{
        width: 200px;
        height: 200px;
        border: 1px solid;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }
    .test{
        width: 100px;
        height: 100px;
        border: 1px solid;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }
  </style>
</head>
<body>
  <div id="app">
      <div class="wrap" @click="handleWrap">
          <div class="inner" @click="handleInner">
              <div class="test" @click.stop="handleTest"></div>
          </div>
      </div>

      <a href="http://www.atguigu.com" @click.prevent="handleA">回娘家</a>

      <input type="text" @keydown.enter="handleInput">

      <button @click.once="handleTest">click</button>

      <div style="width: 100px;height: 100px;background: deeppink"
           @click.middle="handleTest"></div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
      el:"#app",
      data:{
          msg:"hello vue"
      },
      methods:{

          handleInput(){
              console.log("handleInput")
          },

          handleA(){
             //进行大量的逻辑判断....
             window.location.href="http://www.atguigu.com"
          },


          handleWrap(){console.log("handleWrap")},
          handleInner(){console.log("handleInner")},
          handleTest(){console.log("handleTest")},
      }
    });
</script>
</html>